<template>
    <div class="order-refund-apply-list-item">
        <van-card class="order-refund-apply-list-item-card van-hairline--bottom"
                  :title="name" :thumb="imageUrl" :num="quantity" :price="totalAmount"/>
        <van-field v-model="item.reason" label="退款原因" placeholder="请选择"
                   input-align="right" readonly is-link
                   :rules="[{ required: true, message: '请选择退款原因', trigger:'onChange' }]"
                   @click="showReasonPicker = true"/>
        <van-field :value="itemStatus" label="货物状态" placeholder="请选择"
                   input-align="right" readonly is-link
                   :rules="[{ required: true, message: '请选择货物状态', trigger:'onChange'}]"
                   @click="showItemStatusPicker = true"/>
        <van-field v-model="item.amount" type="number" label="退款金额"
                   class="order-refund-apply-list-item-amount"
                   :rules="[
                     { required: true, message: '请输入退款金额', trigger:'onChange'},
                     { validator: amountNotZeroValidator, message: '输入的退款金额必须大于0', formatter: amountFormatter, trigger:'onChange'},
                     { validator: amountValidator, message: '输入的退款金额超出最大可退款金额', formatter: amountFormatter, trigger:'onChange'}]"/>
        <van-field v-model="item.notes" type="textarea" label="退款说明"
                   maxlength="200" show-word-limit placeholder="选填，最多200字"/>
        <div class="order-refund-apply-list-item-tip">{{refundAmountsTip}}</div>
        <white-space/>
        <van-popup v-model="showReasonPicker" position="bottom">
            <van-picker show-toolbar :columns="reasonColumns"
                        @confirm="handleReasonConfirm"
                        @cancel="showReasonPicker = false"/>
        </van-popup>
        <van-popup v-model="showItemStatusPicker" position="bottom">
            <van-picker show-toolbar :columns="itemStatusColumns"
                        @confirm="handleItemStatusConfirm"
                        @cancel="showItemStatusPicker = false"/>
        </van-popup>
    </div>
</template>

<script>
  import BigDecimal from "decimal.js"
  import * as _ from "lodash"
  import { Card, Field, Picker, Popup } from "vant"
  import WhiteSpace from "@/components/WhiteSpace"
  import WingBlank from "@/components/WingBlank"

  const RECEIVED = "received"
  const NOT_RECEIVED = "not_received"

  const RECEIVED_LABEL = "已收到货"
  const NOT_RECEIVED_LABEL = "未收到货"

  export default {
    name: "OrderRefundApplyListItem",
    components: {
      WingBlank,
      WhiteSpace,
      [Card.name]: Card,
      [Field.name]: Field,
      [Picker.name]: Picker,
      [Popup.name]: Popup,
    },
    props: {
      index: [String, Number],
      item: Object,
      name: String,
      imageUrl: String,
      quantity: [String, Number],
      totalAmount: [String, Number],
      refundingAmount: [String, Number],
      refundedAmount: [String, Number],
    },
    computed: {
      refundableAmount() {
        const { item } = this
        return new BigDecimal(item.totalAmount).sub(item.refundedAmount).sub(item.refundingAmount).toNumber()
      },
      refundAmountsTip() {
        const { refundableAmount, refundingAmount, refundedAmount } = this
        const tips = [`最多还可退 ¥ ${refundableAmount}`]
        if (refundedAmount) {
          tips.push(`，已退款 ¥ ${refundedAmount}`)
        }
        if (refundingAmount) {
          tips.push(`，退款中 ¥ ${refundingAmount}`)
        }
        return _.join(tips, "")
      },
    },
    data() {
      return {
        reasonColumns: ["未按约定时间发货", "拍错/多拍/不喜欢", "协商一致退款", "其他"],
        showReasonPicker: false,
        itemStatusColumns: [RECEIVED_LABEL, NOT_RECEIVED_LABEL],
        showItemStatusPicker: false,
        itemStatus: "",
      }
    },
    methods: {
      amountNotZeroValidator(value) {
        return new BigDecimal(value).greaterThan(0)
      },
      amountValidator(value) {
        const { totalAmount, item } = this
        return new BigDecimal(totalAmount).sub(item.refundedAmount).sub(item.refundingAmount).sub(value).greaterThanOrEqualTo(0)
      },
      amountFormatter(value) {
        return _.isEmpty(value) ? 0 : _.toNumber(value)
      },
      handleItemStatusConfirm(status) {
        this.itemStatus = status
        if (status === RECEIVED_LABEL) {
          this.item.itemStatus = RECEIVED
        } else if (status === NOT_RECEIVED_LABEL) {
          this.item.itemStatus = NOT_RECEIVED
        }
        this.showItemStatusPicker = false
      },
      handleReasonConfirm(reason) {
        this.item.reason = reason
        this.showReasonPicker = false
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-refund-apply-list-item {
        .order-refund-apply-list-item-card {
            background: #fff;
        }

        .order-refund-apply-list-item-amount {
            ::v-deep .van-field__control {
                color: $orange-dark;
            }
        }

        .order-refund-apply-list-item-tip {
            margin: 4px 9px;
            color: $gray-6;
            font-size: 13px;
        }
    }
</style>
